2 files changed, 39 insertions, 0 deletions
diff --git a/src/routes/girls/[language]/+page.server.ts b/src/routes/girls/[language]/+page.server.ts
new file mode 100644
index 00000000..7084986f
--- /dev/null
+++ b/src/routes/girls/[language]/+page.server.ts
@@ -0,0 +1,5 @@
+export const load = ({ params }) => {
+	return {
+		language: params.language
+	};
+};
diff --git a/src/routes/girls/[language]/+page.svelte b/src/routes/girls/[language]/+page.svelte
new file mode 100644
index 00000000..6cafe198
--- /dev/null
+++ b/src/routes/girls/[language]/+page.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import Senpy from '$lib/Data/senpy';
+	import Message from '$lib/Loading/Message.svelte';
+	import Skeleton from '$lib/Loading/Skeleton.svelte';
+
+	export let data;
+</script>
+
+<div class="card">
+	{#await Senpy.getImages(data.language)}
+		<Message message="Loading images ..." />
+
+		<Skeleton grid={true} count={1} width="49%" height="16.25em" />
+	{:then images}
+		<div class="images">
+			{#each images as image}
+				<img src={image} alt="An anime girl holding a programming book" />
+			{/each}
+		</div>
+	{/await}
+</div>
+
+<style lang="scss">
+	.images {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(16.25em, 1fr));
+		gap: 1em;
+
+		img {
+			border-radius: 8px;
+			width: 100%;
+		}
+	}
+</style>